<template>
  <div style="padding: 0px 20px">
    <!-- <div
      style="
        padding: 0px 20px;
        position: fixed;
        top: 120px;
        z-index: 2;
        background: #fff;
        height: 40px;
        width: calc(100% - 243px);
        line-height: 40px;
      "
    >
      <el-breadcrumb separator="/" style="background: #fff; height: 40px; line-height: 40px">
        <el-breadcrumb-item :to="{ path: '/alarmStatistics/index' }">项目总览</el-breadcrumb-item>
        <el-breadcrumb-item>无锡安普瑞斯-化成分容</el-breadcrumb-item>
      </el-breadcrumb>
    </div> -->

    <div class="table-container">
      <el-row>
        <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
          <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
            <el-card class="box-card" shadow="never" :body-style="{ padding: '0px 0px' }" style="height: 200px">
              <!-- <div style="display: flex">
                  <div style="display: flex; padding: 16px; text-align: center">
                    <div class="user-profile">
                      <div class="box-center" style="padding-top: 30px">
                        <el-avatar size="large" style="width: 80px; height: 80px; line-height: 80px; font-size: 40px; background: #409eff">
                          无
                        </el-avatar>
                      </div>
                      <div class="box-center user-name">无锡安普瑞斯-化成分容</div>
                      <div class="box-center user-name text-muted">24K0001</div>
                    </div>
                  </div>
                </div> -->
              <div style="display: flex; padding: 16px">
                <div style="flex: 0 0 60px">
                  <el-avatar size="large" class="ava-style" :style="randomRgb(id)">{{ program.project_name?.charAt(0) }}</el-avatar>
                </div>
                <div style="margin-left: 10px; display: flex; flex-direction: column; align-items: left; justify-content: center">
                  <div style="font-size: 16px; font-weight: 600">{{ program.project_name }}</div>
                  <div>{{ costNumber }}</div>
                </div>
              </div>
              <div style="padding: 10px 16px">
                <el-descriptions title="" direction="vertical" :column="4" border>
                  <el-descriptions-item label="总产量">{{ program.totalNumber ? program.totalNumber : '-' }}</el-descriptions-item>
                  <el-descriptions-item label="总设备数">
                    {{ program.devices_number ? program.devices_number + '台' : '-' }}
                  </el-descriptions-item>
                  <el-descriptions-item label="设备类型" :span="2">
                    <el-tag
                      effect="dark"
                      :color="
                        program.project_device_type == 1
                          ? '#1e90ff'
                          : program.project_device_type == 2
                          ? '#6b8e23'
                          : program.project_device_type == 3
                          ? '#7b68ee'
                          : program.project_device_type == 4
                          ? '#32cd32'
                          : program.project_device_type == 5
                          ? '#ff00ff'
                          : program.project_device_type == 6
                          ? '#3cb371'
                          : program.project_device_type == 7
                          ? '#b8860b'
                          : program.project_device_type == 8
                          ? '#ffa500'
                          : '#6495ed'
                      "
                    >
                      {{
                        program.project_device_type == 1
                          ? '夹具化成'
                          : program.project_device_type == 2
                          ? '夹具分容'
                          : program.project_device_type == 3
                          ? 'DCR'
                          : program.project_device_type == 4
                          ? 'OCV'
                          : program.project_device_type == 5
                          ? 'LPM'
                          : program.project_device_type == 6
                          ? '分选机'
                          : program.project_device_type == 7
                          ? '仪器'
                          : program.project_device_type == 8
                          ? '化成分容一体机'
                          : ''
                      }}
                    </el-tag>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </el-card>
          </el-col>
          <!-- <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
              <el-descriptions title="" direction="vertical" :column="2" border>
                <el-descriptions-item label="设备数"><b>999</b></el-descriptions-item>
                <el-descriptions-item label="总产量"><b>1200</b></el-descriptions-item>
                <el-descriptions-item label="NG电池数量"><b>34552</b></el-descriptions-item>
                <el-descriptions-item label="良品率">80%</el-descriptions-item>
              </el-descriptions>
            </el-col> -->
          <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
            <el-card class="box-card" shadow="never">
              <vab-chart autoresize :option="option3" style="height: 160px" />
            </el-card>
          </el-col>
          <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
            <el-card class="box-card" shadow="never">
              <vab-chart autoresize :option="option4" style="height: 160px" />
            </el-card>
          </el-col>
        </el-col>
        <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
          <el-card class="box-card project" shadow="never">
            <div slot="header" class="clearfix" style="display: flex; align-items: center; justify-content: right">
              <div>
                <el-radio-group v-model="chartKey" fill="#909399">
                  <el-radio-button label="D">日</el-radio-button>
                  <el-radio-button label="W">周</el-radio-button>
                  <el-radio-button label="M">月</el-radio-button>
                  <el-radio-button label="Y">年</el-radio-button>
                </el-radio-group>
              </div>
              <div style="margin-left: 20px">
                <el-radio-group v-model="chart2Key">
                  <el-radio-button label="alarm">报警统计</el-radio-button>
                  <el-radio-button label="number">产量统计</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div v-show="chart2Key == 'alarm'">
              <vab-chart autoresize :option="optionDayAlarm" style="height: 200px" v-show="chartKey == 'D'" />
              <vab-chart autoresize :option="optionWeekAlarm" style="height: 200px" v-show="chartKey == 'W'" />
              <vab-chart autoresize :option="optionMonthAlarm" style="height: 200px" v-show="chartKey == 'M'" />
              <vab-chart autoresize :option="optionYearAlarm" style="height: 200px" v-show="chartKey == 'Y'" />
            </div>
            <div v-show="chart2Key == 'number'">
              <vab-chart autoresize :option="optionDay" style="height: 200px" v-show="chartKey == 'D'" />
              <vab-chart autoresize :option="optionWeek" style="height: 200px" v-show="chartKey == 'W'" />
              <vab-chart autoresize :option="optionMonth" style="height: 200px" v-show="chartKey == 'M'" />
              <vab-chart autoresize :option="optionYear" style="height: 200px" v-show="chartKey == 'Y'" />
            </div>
          </el-card>
        </el-col>
        <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
          <el-card class="box-card" shadow="never" :body-style="{ padding: '20px ' }">
            <div style="display: flex; justify-content: center; padding: 20px">
              <div style="display: flex; align-items: center; flex: 1">
                <!-- <el-row>
                  <button :class="['menu-btn', tableKey == '' ? 'checkBtn' : '']" @click="filterDate(0)">全部</button>
                  <button :class="['menu-btn', tableKey == '1' ? 'checkBtn' : '']" @click="filterDate(1)">日</button>
                  <button :class="['menu-btn', tableKey == '2' ? 'checkBtn' : '']" @click="filterDate(2)">周</button>
                  <button :class="['menu-btn', tableKey == '3' ? 'checkBtn' : '']" @click="filterDate(3)">月</button>
                  <button :class="['menu-btn', tableKey == '4' ? 'checkBtn' : '']" @click="filterDate(4)">年</button>
                </el-row>
                <el-date-picker
                  v-model="filterData.day"
                  type="date"
                  placeholder="选择日期"
                  v-show="tableKey == 1"
                  clearable="false"
                  @change="fetchData()"
                ></el-date-picker>
                <el-date-picker
                  v-model="filterData.week"
                  type="week"
                  format="yyyy 第 WW 周"
                  placeholder="选择周"
                  v-show="tableKey == 2"
                  clearable="false"
                  @change="fetchData()"
                ></el-date-picker>
                <el-date-picker
                  v-model="filterData.month"
                  type="month"
                  placeholder="选择月"
                  v-show="tableKey == 3"
                  clearable="false"
                  @change="fetchData()"
                ></el-date-picker>
                <el-date-picker
                  v-model="filterData.year"
                  type="year"
                  placeholder="选择年"
                  v-show="tableKey == 4"
                  clearable="false"
                  @change="fetchData()"
                ></el-date-picker> -->
                <!-- <el-date-picker
                  v-model="dataArry"
                  type="daterange"
                  unlink-panels
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions"
                  @change="fetchDevice()"
                  format="yyyy-MM-dd"
                  range-separator="至"
                  value-format="yyyy-MM-dd"
                  clearable
                ></el-date-picker> -->
              </div>
              <div style="display: flex; justify-content: right; align-items: center; flex: 1">
                <el-form
                  ref="form"
                  :inline="true"
                  :model="queryForm"
                  @submit.native.prevent
                  style="display: flex; justify-content: center; align-items: center"
                >
                  <el-select v-model="sortType" placeholder="排序规则" style="width: 160px" @change="sortData($event, index)">
                    <el-option label="总报警次数" value="0"></el-option>
                    <el-option label="总产量" value="1"></el-option>
                    <el-option label="NG电池数量" value="2"></el-option>
                    <el-option label="良品率" value="3"></el-option>
                    <el-option label="A级故障率" value="4"></el-option>
                    <el-option label="B级故障率" value="5"></el-option>
                    <el-option label="C级故障率" value="6"></el-option>
                    <el-option label="总故障率" value="7"></el-option>
                  </el-select>
                  <el-select
                    v-model="sortIndex"
                    placeholder="升/降序"
                    style="width: 100px; margin-left: 10px"
                    @change="orderFuc()"
                    v-show="sortType"
                  >
                    <el-option label="降序" :value="0"></el-option>
                    <el-option label="升序" :value="1"></el-option>
                  </el-select>
                </el-form>
                <el-tooltip class="item" effect="dark" content="点击查看原始数据" placement="bottom">
                  <i
                    class="el-icon-tickets"
                    style="padding-left: 16px; font-size: 26px; color: #909399; cursor: pointer"
                    @click="showTable()"
                  ></i>
                </el-tooltip>
              </div>
            </div>
            <el-table ref="tableSort" :data="list" :element-loading-text="elementLoadingText" :show-header="false" @row-click="openDetails">
              <el-table-column label="设备名称" prop="projectName" show-overflow-tooltip>
                <template #default="scope">
                  <div style="display: flex; padding: 16px">
                    <div style="flex: 0 0 40px">
                      <el-image style="" :src="iourl" fit="fill"></el-image>
                    </div>
                    <div style="margin-left: 10px; display: flex; flex-direction: column; align-items: left; justify-content: center">
                      <div style="font-size: 16px; font-weight: 600">{{ scope.row.device_name }}</div>
                      <!-- <div>
                        {{ scope.row.costNumber }}
                      </div> -->
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="" prop="projectName" min-width="160px">
                <template #default="{ row }">
                  <el-descriptions direction="vertical" :column="4" border>
                    <el-descriptions-item label="总产量">
                      <b>{{ row.totalNumber ? row.totalNumber : '-' }}</b>
                    </el-descriptions-item>
                    <el-descriptions-item label="NG电池数量">
                      <b>{{ row.ngNumber ? row.ngNumber : '-' }}</b>
                    </el-descriptions-item>
                    <el-descriptions-item label="总报警次数" :span="2">
                      <b>{{  row.totalAlarmYes ? row.totalAlarmYes : '0' }}</b>/{{  row.totalAlarm ? row.totalAlarm : '0' }}
                    </el-descriptions-item>
                  </el-descriptions>
                </template>
              </el-table-column>
              <el-table-column label="" prop="projectName" min-width="200px">
                <template #default="{ row }">
                  <el-descriptions direction="vertical" :column="3" border>
                    <el-descriptions-item label="A级故障数(率)">
                      <b>{{  row.ANumberYes ? row.ANumberYes : '0' }}</b>/{{  row.ANumber ? row.ANumber : '0' }}<b>{{'（' + (row.AgPer ? row.AgPer : '0.00') + '‱）' }}</b>
                    </el-descriptions-item>
                    <el-descriptions-item label="B级故障数(率)">
                      <b>{{  row.BNumberYes ? row.BNumberYes : '0' }}</b>/{{ row.BNumber ? row.BNumber : '0' }}<b>{{'（' + (row.BgPer ? row.BgPer : '0.00') + '‱）' }}</b>
                    </el-descriptions-item>
                    <el-descriptions-item label="C级故障数(率)">
                      <b>{{  row.CNumberYes ? row.CNumberYes : '0' }}</b>/{{ row.CNumber ? row.CNumber : '0' }}<b>{{'（' + (row.CgPer ? row.CgPer : '0.00') + '‱）' }}</b>
                    </el-descriptions-item>
                  </el-descriptions>
                </template>
              </el-table-column>
              <el-table-column label="良品率" prop="alarmTime">
                <template #default="{ row }">
                  <div style="display: flex; flex-direction: column; align-items: left; justify-content: center">
                    <div>良品率</div>
                    <div style="font-size: 16px; font-weight: 600">
                      <el-progress :percentage="row.okPer ? row.okPer : '0.00'" color="LimeGreen"></el-progress>
                    </div>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="总故障率" prop="alarmTime">
                <template #default="{ row }">
                  <div style="display: flex; flex-direction: column; align-items: left; justify-content: center">
                    <div>总故障率</div>
                    <div style="font-size: 16px; font-weight: 600">
                      <el-progress :percentage="row.totalNgPer ? row.totalNgPer : '0.00'" color="red" :format="format"></el-progress>
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
          <el-dialog title="原始数据" :visible.sync="table" width="65%">
            <el-table ref="tableSort" :data="warnlist" :element-loading-text="elementLoadingText">
              <el-table-column label="序号" show-overflow-tooltip width="95">
                <template #default="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="治具号" prop="fixtureNumber" show-overflow-tooltip />
              <el-table-column label="报警内容" prop="alarmContent" show-overflow-tooltip />
              <el-table-column label="报警代码" prop="alarmCode" show-overflow-tooltip />
              <el-table-column label="报警等级" prop="alarmLevel">
                <template #default="{ row }">
                  <el-tag>
                    {{ row.alarmLevel }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="是否有效" prop="alarmUserflag">
                <template #default="{ row }">
                  <el-tag :type="row.alarmUserflag == 1 ? 'success' : 'info'" effect="dark">
                    {{ row.alarmUserflag == 1 ? '有效' : '无效' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="发生时间" prop="alarmTime" width="200" />
              <el-table-column label="创建时间" prop="createdTime" width="200" />
            </el-table>
            <el-pagination
              :current-page="queryForm.pageNo"
              :layout="layout"
              :page-size="queryForm.pageSize"
              :total="queryForm.total"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            />
          </el-dialog>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {  getProjectProduct } from '@/api/program'

  import {
    getAllByCostNumber,
    getProductLineDataForDay,
    getProductLineDataForWeek,
    getProductLineDataForMonth,
    getProductLineDataForYear,
    getAlarmLineDataForDay,
    getAlarmLineDataForWeek,
    getAlarmLineDataForMonth,
    getAlarmLineDataForYear,
  } from '@/api/alarm'
  import VabChart from '@/plugins/echarts'
  import { getTotalDeviceData } from '@/api/device'

  export default {
    name: 'alarmStatistics',
    filters: {},
    components: {
      VabChart,
    },
    data() {
      return {
        orderValue: '',
        sortIndex: 0,
        pickerOptions: {
          shortcuts: [
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              },
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              },
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', [start, end])
              },
            },
          ],
        },
        programTotalData: {},
        productData: { ngNumber: '', okNumber: '' },
        table: false,
        costNumber: this.$route.query.id,
        program: {},
        right: false,
        activeIndex: '1',
        list: [],
        warnlist: [],
        iourl: require('@/assets/img/io.png'),
        option3: {
          animation: true, 
          // title: {
          //   text: '总故障数（率）',
          //   x: 'center',
          // },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data: ['NG电池数', 'OK电池数'],
          },
          toolbox: {
            show: false,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: {
                show: true,
                type: ['pie', 'funnel'],
                option: {
                  funnel: {
                    x: '25%',
                    width: '50%',
                    funnelAlign: 'left',
                  },
                },
              },
              // restore: { show: true },
              // saveAsImage: { show: true },
            },
          },
          calculable: true,
          series: [
            {
              name: '生产数据/（率）',
              type: 'pie',
              radius: '72%',
              center: ['50%', '60%'],
              startAngle: 0,
              data: [],
              // label: {
              //   position: 'outside',
              //   alignTo: 'edge', // 标签沿边缘对齐
              //   margin: 40, // 调整标签与饼图的间距
              //   formatter: '{b}: {d}%',
              //   avoidLabelOverlap: true, // 避免标签重叠
              // },
              // labelLine: {
              //   length: 10, // 第一段引导线长度
              //   length2: 10, // 第二段引导线长度
              //   smooth: 0.2, // 平滑度
              // },
            },
          ],
        },
        option4: {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data: ['故障数/率', '未出现故障/率', 'A', 'B', 'C'],
          },
          series: [
            {
              name: '故障等级',
              type: 'pie',
              selectedMode: 'single',
              radius: [0, 50],

              // for funnel
              x: '35%',
              width: '39%',
              funnelAlign: 'right',
              max: 200,
              itemStyle: {
                normal: {
                  label: {
                    position: 'inner',
                  },
                  labelLine: {
                    show: false,
                  },
                },
              },
              data: [],
            },
            {
              name: '报警统计',
              type: 'pie',
              radius: [55, 70],

              // for funnel
              x: '10%',
              width: '89%',
              funnelAlign: 'left',
              max: 1048,
              startAngle: 0,
              data: [],
            },
          ],
        },
        // filterData: {
        //   day: '',
        //   week: '',
        //   month: '',
        //   year: '',
        // },
        dataArry: [],
        tableKey: '',
        sortType: '',
        chartKey: 'D',
        chart2Key: 'alarm',
        dataValue: [],
        optionDayAlarm: {
          tooltip: {
            trigger: 'item',
          },
          color: '#da70d6',
          grid: {
            left: '3%', //默认10%
            right: '4%', //默认10%
            bottom: '8%', //默认60
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: [],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [],
              type: 'line',
              markPoint: {
                data: [
                  {
                    type: 'max',
                    name: '最大值',
                    tooltip: {
                      formatter: '{b}\n {c}',
                    },
                  },
                  {
                    type: 'min',
                    name: '最小值',
                    tooltip: {
                      formatter: '{b}\n {c}',
                    },
                  },
                ],
              },
              markLine: {
                data: [
                  {
                    type: 'average',
                    name: '平均值',
                    tooltip: {
                      formatter: '{b}\n {c}',
                    },
                  },
                ],
              },
            },
          ],
        },
        optionWeekAlarm: {
          tooltip: {
            trigger: 'item',
          },
          color: '#73c0de',
          grid: {
            left: '3%', //默认10%
            right: '4%', //默认10%
            bottom: '8%', //默认60
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: [],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [],
              type: 'line',
              markPoint: {
                data: [
                  {
                    type: 'max',
                    name: '最大值',
                    tooltip: {
                      formatter: '{b}\n {c}',
                    },
                  },
                  {
                    type: 'min',
                    name: '最小值',
                    tooltip: {
                      formatter: '{b}\n {c}',
                    },
                  },
                ],
              },
              markLine: {
                data: [
                  {
                    type: 'average',
                    name: '平均值',
                    tooltip: {
                      formatter: '{b}\n {c}',
                    },
                  },
                ],
              },
            },
          ],
        },
        optionMonthAlarm: {
          tooltip: {
            trigger: 'item',
          },
          color: '#fac858',
          grid: {
            left: '3%', //默认10%
            right: '4%', //默认10%
            bottom: '8%', //默认60
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: [],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [],
              type: 'line',
              markPoint: {
                data: [
                  {
                    type: 'max',
                    name: '最大值',
                    tooltip: {
                      formatter: '{b}\n {c}',
                    },
                  },
                  {
                    type: 'min',
                    name: '最小值',
                    tooltip: {
                      formatter: '{b}\n {c}',
                    },
                  },
                ],
              },
              markLine: {
                data: [
                  {
                    type: 'average',
                    name: '平均值',
                    tooltip: {
                      formatter: '{b}\n {c}',
                    },
                  },
                ],
              },
            },
          ],
        },
        optionYearAlarm: {
          tooltip: {
            trigger: 'item',
          },
          color: '#91cc75',
          grid: {
            left: '3%', //默认10%
            right: '4%', //默认10%
            bottom: '8%', //默认60
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: [],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [],
              type: 'line',
              markPoint: {
                data: [
                  {
                    type: 'max',
                    name: '最大值',
                    tooltip: {
                      formatter: '{b}\n {c}',
                    },
                  },
                  {
                    type: 'min',
                    name: '最小值',
                    tooltip: {
                      formatter: '{b}\n {c}',
                    },
                  },
                ],
              },
              markLine: {
                data: [
                  {
                    type: 'average',
                    name: '平均值',
                    tooltip: {
                      formatter: '{b}\n {c}',
                    },
                  },
                ],
              },
            },
          ],
        },
        optionDay: {
          tooltip: {
            trigger: 'item',
          },
          color: '#5470c6',
          grid: {
            left: '3%', //默认10%
            right: '4%', //默认10%
            bottom: '8%', //默认60
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: [],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [],
              type: 'line',
              markPoint: {
                data: [
                  {
                    type: 'max',
                    name: '最大值',
                    tooltip: {
                      formatter: '{b}\n {c}',
                    },
                  },
                  {
                    type: 'min',
                    name: '最小值',
                    tooltip: {
                      formatter: '{b}\n {c}',
                    },
                  },
                ],
              },
              markLine: {
                data: [
                  {
                    type: 'average',
                    name: '平均值',
                    tooltip: {
                      formatter: '{b}\n {c}',
                    },
                  },
                ],
              },
            },
          ],
        },
        optionWeek: {
          tooltip: {
            trigger: 'item',
          },
          color: '#73c0de',
          grid: {
            left: '3%', //默认10%
            right: '4%', //默认10%
            bottom: '8%', //默认60
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: [],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [],
              type: 'line',
              markPoint: {
                data: [
                  {
                    type: 'max',
                    name: '最大值',
                    tooltip: {
                      formatter: '{b}\n {c}',
                    },
                  },
                  {
                    type: 'min',
                    name: '最小值',
                    tooltip: {
                      formatter: '{b}\n {c}',
                    },
                  },
                ],
              },
              markLine: {
                data: [
                  {
                    type: 'average',
                    name: '平均值',
                    tooltip: {
                      formatter: '{b}\n {c}',
                    },
                  },
                ],
              },
            },
          ],
        },
        optionMonth: {
          tooltip: {
            trigger: 'item',
          },
          color: '#fac858',
          grid: {
            left: '3%', //默认10%
            right: '4%', //默认10%
            bottom: '8%', //默认60
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: [],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [],
              type: 'line',
              markPoint: {
                data: [
                  {
                    type: 'max',
                    name: '最大值',
                    tooltip: {
                      formatter: '{b}\n {c}',
                    },
                  },
                  {
                    type: 'min',
                    name: '最小值',
                    tooltip: {
                      formatter: '{b}\n {c}',
                    },
                  },
                ],
              },
              markLine: {
                data: [
                  {
                    type: 'average',
                    name: '平均值',
                    tooltip: {
                      formatter: '{b}\n {c}',
                    },
                  },
                ],
              },
            },
          ],
        },
        optionYear: {
          tooltip: {
            trigger: 'item',
          },
          color: '#91cc75',
          grid: {
            left: '3%', //默认10%
            right: '4%', //默认10%
            bottom: '8%', //默认60
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: [],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [],
              type: 'line',
              markPoint: {
                data: [
                  {
                    type: 'max',
                    name: '最大值',
                    tooltip: {
                      formatter: '{b}\n {c}',
                    },
                  },
                  {
                    type: 'min',
                    name: '最小值',
                    tooltip: {
                      formatter: '{b}\n {c}',
                    },
                  },
                ],
              },
              markLine: {
                data: [
                  {
                    type: 'average',
                    name: '平均值',
                    tooltip: {
                      formatter: '{b}\n {c}',
                    },
                  },
                ],
              },
            },
          ],
        },
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        elementLoadingText: '正在加载...',
        queryForm: {
          pageNo: 1,
          pageSize: 10,
          total: 0,
          title: '',
          costNumber:''
        },
      }
    },
    computed: {},
    created() {
      this.init()
    },
    beforeDestroy() {},
    mounted() {},
    methods: {
      init(){
        this.getProjectProduct()
        this.fetchDevice()
        this.getLineData()
      },
      async getProjectProduct() {
        const { data } = await getProjectProduct({ costNumber: this.costNumber })
        this.program=data[0];
        let ngNumber=this.program.ngNumber;
        let okNumber=this.program.totalNumber-this.program.ngNumber;
        this.option3.series[0].data = [
          { value: ngNumber, name: 'NG电池数' },
          { value: okNumber, name: 'OK电池数' },
        ]

        this.option4.series[0].data = [
          { value: this.program.ANumber, name: 'A' },
          { value: this.program.BNumber, name: 'B' },
          { value: this.program.CNumber, name: 'C' },
        ]
        this.option4.series[1].data = [
          {
            value: this.program.totalAlarm,
            name: '故障数/率',
          },
          {
            value:
              this.program.totalNumber -
              this.program.totalAlarm,
            name: '未出现故障/率',
          },
        ]
      },

      async fetchDevice() {
        const { data } = await getTotalDeviceData({
          pageNo: '',
          pageSize: '',
          costNumber: this.costNumber,
          title: '',
          // startTime: this.dataArry ? this.dataArry[0] : '',
          // endTime: this.dataArry ? this.dataArry[1] : '',
        })
        this.list = data
        // this.total = total
        this.list.forEach(function (item) {
          item.okPer = item.totalNumber == 0 ? '0.00' : (((item.totalNumber - item.ngNumber) / item.totalNumber) * 100).toFixed(2)
          item.AgPer = item.totalNumber == 0 ? '0.00' : ((item.ANumberYes / item.totalNumber) * 10000).toFixed(2)
          item.BgPer = item.totalNumber == 0 ? '0.00' : ((item.BNumberYes / item.totalNumber) * 10000).toFixed(2)
          item.CgPer = item.totalNumber == 0 ? '0.00' : ((item.CNumberYes / item.totalNumber) * 10000).toFixed(2)
          item.totalNgPer =
            item.totalNumber == 0 ? '0.00' : ((item.totalAlarmYes / item.totalNumber) * 10000).toFixed(2)
        })
      },


      //获取折线图数据
      getLineData() {
        this.getProductLineDataForDay()
        this.getProductLineDataForWeek()
        this.getProductLineDataForMonth()
        this.getProductLineDataForYear()
        this.getAlarmLineDataForDay()
        this.getAlarmLineDataForWeek()
        this.getAlarmLineDataForMonth()
        this.getAlarmLineDataForYear()
      },
      //获取产量日周月年
      async getProductLineDataForDay() {
        const { data } = await getProductLineDataForDay({ costNumber: this.costNumber })
        const [arr1, arr2] = this.splitIntoTwoArrays(data)
        this.optionDay.xAxis.data = arr1
        this.optionDay.series[0].data = arr2
      },
      async getProductLineDataForWeek() {
        const { data } = await getProductLineDataForWeek({ costNumber: this.costNumber })
        const [arr1, arr2] = this.splitIntoTwoArrays(data, 'week', 'number')
        console.log(123, arr1)
        console.log(123, arr2)
        this.optionWeek.xAxis.data = arr1
        this.optionWeek.series[0].data = arr2
      },
      async getProductLineDataForMonth() {
        const { data } = await getProductLineDataForMonth({ costNumber: this.costNumber })
        const [arr1, arr2] = this.splitIntoTwoArrays(data)
        this.optionMonth.xAxis.data = arr1
        this.optionMonth.series[0].data = arr2
      },
      async getProductLineDataForYear() {
        const { data } = await getProductLineDataForYear({ costNumber: this.costNumber })
        const [arr1, arr2] = this.splitIntoTwoArrays(data)
        this.optionYear.xAxis.data = arr1
        this.optionYear.series[0].data = arr2
      },
      //获取报警日周月年
      async getAlarmLineDataForDay() {
        const { data } = await getAlarmLineDataForDay({ costNumber: this.costNumber })
        const [arr1, arr2] = this.splitIntoTwoArrays(data)
        this.optionDayAlarm.xAxis.data = arr1
        this.optionDayAlarm.series[0].data = arr2
      },
      async getAlarmLineDataForWeek() {
        const { data } = await getAlarmLineDataForWeek({ costNumber: this.costNumber })
        const [arr1, arr2] = this.splitIntoTwoArrays(data, 'week', 'number')
        this.optionWeekAlarm.xAxis.data = arr1
        this.optionWeekAlarm.series[0].data = arr2
      },
      async getAlarmLineDataForMonth() {
        const { data } = await getAlarmLineDataForMonth({ costNumber: this.costNumber })
        const [arr1, arr2] = this.splitIntoTwoArrays(data)
        this.optionMonthAlarm.xAxis.data = arr1
        this.optionMonthAlarm.series[0].data = arr2
      },
      async getAlarmLineDataForYear() {
        const { data } = await getAlarmLineDataForYear({ costNumber: this.costNumber })
        const [arr1, arr2] = this.splitIntoTwoArrays(data)
        this.optionYearAlarm.xAxis.data = arr1
        this.optionYearAlarm.series[0].data = arr2
      },
      
      randomRgb(id) {
        let colorArry = [
          '#ff7f50',
          '#87cefa',
          '#da70d6',
          '#6495ed',
          '#ff69b4',
          '#ba55d3',
          '#cd5c5c',
          '#ffa500',
          '#40e0d0',
          '#1e90ff',
          '#ff6347',
          '#7b68ee',
          '#00fa9a',
          '#ffd700',
          '#6b8e23',
          '#ff00ff',
          '#3cb371',
          '#b8860b',
          '#30e0e0',
        ]
        return {
          background: colorArry[parseInt(id % 10)],
        }
      },
      // filterDate(type) {
      //   this.tableKey = type
      //   if (type == 0) {
      //     this.fetchDevice()
      //   }
      // },
      openDetails(nodeData) {
        // this.$router.push({ path: '/alarmStatistics/ioReport', query: { id: nodeData.id } })
      },
      orderFuc() {
        this.sortData(this.orderValue, '')
      },
      sortData(value, index) {
        this.orderValue = value
        let type = ''
        switch (value) {
          case '0':
            type = 'totalAlarm'
            break
          case '1':
            type = 'totalNumber'
            break
          case '2':
            type = 'ngNumber'
            break
          case '3':
            type = 'okPer'
            break
          case '4':
            type = 'AgPer'
            break
          case '5':
            type = 'BgPer'
            break
          case '6':
            type = 'CgPer'
            break
          case '7':
            type = 'totalNgPer'
            break
          default:
            break
        }
        if (this.sortIndex == 1) {
          this.list.sort((a, b) => a[type] - b[type])
        } else {
          this.list.sort((a, b) => b[type] - a[type])
        }
      },
      format(percentage) {
        return `${percentage}‱`
      },
      async fetchTableData() {
        const { data, total } = await getAllByCostNumber(this.queryForm)
        this.warnlist = data
        this.queryForm.total = total
      },
      showTable() {
        this.queryForm.costNumber = this.costNumber
        this.fetchTableData()
        this.table = true
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchTableData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchTableData()
      },
      //处理折线图数据
      splitIntoTwoArrays(data, keyA, keyB) {
        if (!Array.isArray(data) || data.length === 0) return [[], []]

        // 获取第一个对象的所有键
        const sampleKeys = Object.keys(data[0])
        if (sampleKeys.length < 2) return [[], []]

        // 动态确定要提取的键
        const firstKey = typeof keyA !== 'undefined' ? keyA : sampleKeys[0]
        const secondKey = typeof keyB !== 'undefined' ? keyB : sampleKeys[1]
        // 定义空值判断逻辑
        const isEmpty = (val) =>
          val === 0 || // 数字 0
          val === '' || // 空字符串
          val === null || // null
          val === undefined // undefined

        // 同步过滤并收集有效数据
        const result = [[], []]
        data.forEach((item) => {
          const valB = item[secondKey]
          if (!isEmpty(valB)) {
            result[0].push(item[firstKey])
            result[1].push(valB)
          }
        })

        // 提取数据
        return result
      },
    },
  }
</script>
<style lang="scss" scoped>
  .menu-btn {
    padding: 5px 16px;
    margin-right: 20px;
    border-radius: 32px;
    color: #4e5969;
    border: 0px;
    background: #fff;
  }
  .menu-btn:active {
    background: #f2f3f5;
  }
  // .content {
  //   margin: 20px 0px;
  // }
  /* 按钮悬浮颜色 */
  .menu-btn:hover {
    background: #f2f3f5;
    border-color: #f2f3f5;
    color: #409eff;
    cursor: pointer;
  }
  .menu-btn:focus {
    background: #f2f3f5;
    border-color: #f2f3f5;
    color: #409eff;
    cursor: pointer;
  }
  /* 按钮点击颜色 */
  .menu-btn:active {
    background: #f2f3f5;
    border-color: #f2f3f5;
  }
  .project {
    ::v-deep {
      .el-card__body {
        padding: 0;
      }
      .el-card__header {
        padding: 10px 12px;
      }
    }
  }
</style>
<style lang="scss" scoped>
  .ava-style {
    background: #409eff;
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 30px;
  }
  .user-profile {
    .user-name {
      font-weight: bold;
    }

    .box-center {
      padding-top: 10px;
    }

    .user-role {
      padding-top: 10px;
      font-weight: 400;
      font-size: 14px;
    }

    .box-social {
      padding-top: 30px;

      .el-table {
        border-top: 1px solid #dfe6ec;
      }
    }

    .user-follow {
      padding-top: 20px;
    }
  }
  .checkBtn {
    background: #f2f3f5;
    border-color: #f2f3f5;
    color: #409eff;
  }
</style>
